<template>
	<div class="share-page">
		<el-breadcrumb separator=">">
			<el-breadcrumb-item>设备管理</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/stock' }">缺货订单</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="stock-page">
			<div class="left">
				<div class="top-tabs">
					<div v-for="item in tabsList" :key="item.index"
						:class="activeIndex === item.index ? 'activity-item' : ''" class="tabs-item" @click="cutTabs(item)">
						{{item.name}}
					</div>
				</div>
				<div class="choice-list">
					<div class="choice-item" v-for="item in searchList" :key="item.index">
						<div class="choice-title">{{item.name}}</div>
						<el-select v-if="item.type == '1'" v-model="item.ivalue"
							:placeholder="item.placeholder">
							<el-option v-for="i in options" :key="i.value" :label="i.label" :value="i.value" />
						</el-select>
						<el-input v-model="item.ivalue" v-if="item.type=='2'" class="rounded-input"
							@blur="blurClick()" @focus="focusClick(item)" :placeholder="item.placeholder" />
					</div>
				</div>
				<div class="screen">
					<div class="screen-text">
						缺货状态
					</div>
					<div class="screen-list">
						<el-button round :color="screenIndex === item.index? '#0071bb': ''" v-for="item in screenList"
							:key="item.index" @click="cutScreen(item)">{{item.name}}</el-button>
					</div>
				</div>
				<div class="device">
					<div class="device-left">
						<el-checkbox class="custom-label" v-model="whole" label="全选" size="large" />
						<div class="device-total">
							共138台设备
						</div>
					</div>
					<div class="device-text">
						已选择零售柜84台、提货柜0台
					</div>
				</div>
				<el-scrollbar height="50vh">
					<div class="goods-list">
						<div class="goods-item" v-for="(item,index) in 10" :key="index">
							<div class="address">
								新颜1号(869825043628429)
							</div>
							<div class="goods-info">
								<div class="personnel">
									补货员:13306236880
								</div>
								<div class="time">
									15天0小时前补过货
								</div>
							</div>
							<div class="cont">
								<div class="cont-left">
									<div class="bank">
										中国工商银行24小时自动银行(常熟新世纪支行)
									</div>
									<div class="bank">
										线路:小王
									</div>
								</div>
								<div class="cont-right">
									<div class="right-type">零售柜</div>
									<div class="right-num">
										<span>缺货数量:12</span>
										<span>断货品种:2</span>
									</div>
								</div>
							</div>
							<img class="selected" src="/src/assets/device/selected.png" alt="" />
						</div>
					</div>
				</el-scrollbar>
			</div>
			<div class="right">
				<div class="right-title">
					所选设备缺货清单
				</div>
				<div class="right-list">
					<div class="tips-box">
						<el-button round :color="rightIndex === item.index? '#0071bb': ''" v-for="item in rightList"
							:key="item.index" @click="cutRight(item)">{{item.name}}</el-button>
						<div class="tips">
							提示:此列表为根据左侧设备的实时缺货数据，左侧设备修改活着的长时间停留在此页面后，
							请点击统计缺货清单重新获取实时清单
						</div>
					</div>
					<div class="count">
						<span>共计缺货数量:102</span>
						<span>共计断货品种:38</span>
					</div>
				</div>
				<div class="tables">
					<el-table :data="tableData" style="width: 100%">
						<el-table-column prop="goods" label="商品">
							<template #default="scope">
								<div class="commodity">
									<img src="/src/assets/home/commodity2.png" alt="" />
									<div class="commodity-right">
										<div class="commodity-num">
											6920458835617
										</div>
										<div class="commodity-text">
											怡宝菊花茶瓶装450ml
										</div>
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="device_residue" label="设备剩余" />
						<el-table-column prop="device_capacity" label="设备当前容量"  />
						<el-table-column prop="goods_capacity" label="商品优化计划容量" />
						<el-table-column prop="lack_goods" label="缺货(计划减剩余)" />
					</el-table>
					<div class="page_number">
						<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :size="size"
							:disabled="disabled"  layout="prev, pager, next, jumper,total" :total="10"
							@size-change="handleSizeChange" @current-change="handleCurrentChange" />
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import type { ComponentSize } from 'element-plus';
	interface screenList {
		name : string;
		index : string;
	}
	interface rightList {
		name : string;
		index : string;
	}
	interface tabsList {
		name : string;
		index : string;
	}
	interface searchList {
		name : string;
		index : string;
		placeholder : string;
		type : string;
		ivalue : string;
	}
	const activeIndex = ref("1");
	const whole = ref(false)
	const screenIndex = ref("1");
	const rightIndex = ref("1");
	const choiceIndex = ref("");
	const currentPage = ref(1);
	const pageSize = ref(1);
	const disabled = ref(false);
	const size = ref<ComponentSize>('small');
	const tabsList = ref<tabsList[]>([
		{
			name: '零柜售',
			index: '1'
		},
		{
			name: '提货柜',
			index: '2'
		}
	])
	const rightList = ref<rightList[]>([
		{
			name: '统计缺货清单',
			index: '1'
		},
		{
			name: '到处缺货清单',
			index: '2'
		},
	])
	const screenList = ref<screenList[]>([
		{
			name: '全部',
			index: '1'
		},
		{
			name: '正常',
			index: '2'
		},
		{
			name: '缺货报警',
			index: '3'
		}
	])
	const options = [
		{
			value: 'Option1',
			label: 'Option1',
		},
		{
			value: 'Option2',
			label: 'Option2',
		},
		{
			value: 'Option3',
			label: 'Option3',
		},
		{
			value: 'Option4',
			label: 'Option4',
		},
		{
			value: 'Option5',
			label: 'Option5',
		},
	]
	const tableData = [
		{
			goods: '2016-05-03',
			device_residue: '0',
			device_capacity: '42',
			goods_capacity: '56',
			lack_goods: '14',
		},
		{
			goods: '2016-05-03',
			device_residue: '0',
			device_capacity: '42',
			goods_capacity: '56',
			lack_goods: '14',
		},
		{
			goods: '2016-05-03',
			device_residue: '0',
			device_capacity: '42',
			goods_capacity: '56',
			lack_goods: '14',
		},
		{
			goods: '2016-05-03',
			device_residue: '0',
			device_capacity: '42',
			goods_capacity: '56',
			lack_goods: '14',
		},
		{
			goods: '2016-05-03',
			device_residue: '0',
			device_capacity: '42',
			goods_capacity: '56',
			lack_goods: '14',
		},
		{
			goods: '2016-05-03',
			device_residue: '0',
			device_capacity: '42',
			goods_capacity: '56',
			lack_goods: '14',
		},
		{
			goods: '2016-05-03',
			device_residue: '0',
			device_capacity: '42',
			goods_capacity: '56',
			lack_goods: '14',
		},
		{
			goods: '2016-05-03',
			device_residue: '0',
			device_capacity: '42',
			goods_capacity: '56',
			lack_goods: '14',
		},
		{
			goods: '2016-05-03',
			device_residue: '0',
			device_capacity: '42',
			goods_capacity: '56',
			lack_goods: '14',
		},
		{
			goods: '2016-05-03',
			device_residue: '0',
			device_capacity: '42',
			goods_capacity: '56',
			lack_goods: '14',
		},
	]
	const searchList = ref<searchList[]>([
		{
			name: '设备名称',
			index: '1',
			placeholder: '请输入',
			type: '2',
			ivalue: ''
		},
		{
			name: '设备IMEI',
			index: '2',
			placeholder: '请选择',
			type: '1',
			ivalue: ''
		},
		{
			name: '场地',
			index: '3',
			placeholder: '请选择',
			type: '1',
			ivalue: ''
		},
		{
			name: '场景',
			index: '4',
			placeholder: '请选择',
			type: '1',
			ivalue: ''
		},
		{
			name: '补货员',
			index: '5',
			placeholder: '请选择',
			type: '1',
			ivalue: ''
		},
		{
			name: '线路',
			index: '6',
			placeholder: '请选择',
			type: '1',
			ivalue: ''
		},
		{
			name: '省市区',
			index: '7',
			placeholder: '请选择',
			type: '1',
			ivalue: ''
		},
		{
			name: '商圈',
			index: '8',
			placeholder: '请选择',
			type: '1',
			ivalue: ''
		}
	])
	const cutTabs = (tabItem : tabsList) => {
		activeIndex.value = tabItem.index;
	};
	const cutScreen = (screenItem : screenList) => {
		screenIndex.value = screenItem.index;
	};
	const cutRight = (rightItem : rightList) => {
		rightIndex.value = rightItem.index;
	};
	const focusClick = (searchItem : searchList) => {
		choiceIndex.value = searchItem.index
	};
	const blurClick = () => {
		choiceIndex.value = ''
	};
	const handleSizeChange = (val : number) => {
		console.log(`${val} items per page`)
	}
	const handleCurrentChange = (val : number) => {
		console.log(`current page: ${val}`)
	}
</script>
<style lang="scss" scoped>
	.stock-page {
		display: flex;
		justify-content: space-between;
		background-color: #F0F0F0;
		margin-top: 20px;
		height: 85.4vh;
		overflow: hidden;
		.left {
			width: 28.5%;
			background-color: #fff;
			padding: 10px;
			.top-tabs {
				width: 100%;
				text-align: center;
				display: flex;
				justify-content: space-between;
				font-weight: bold;
				font-size: 14px;

				.tabs-item {
					width: 50%;
					padding: 10px;
					background-color: #fff;
					border-bottom: 1px solid #d2d2d2;
				}

				.activity-item {
					background-color: #f0a93e;
					border-bottom: 1px solid #f0a93e;
					color: #fff;
				}

				.tabs-item:hover {
					cursor: pointer;
				}
			}

			.choice-list {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				padding: 10px 5px;

				.choice-item {
					width: 45%;
					display: flex;
					align-items: center;
					margin-bottom: 10px;

					.el-select {
						width: 160px;
					}

					.choice-title {
						font-size: 12px;
						width: 70px;
						text-align: center;
					}

					.rounded-input {
						width: 160px;
					}
				}
			}

			.screen {
				padding: 0 10px;
				display: flex;
				align-items: center;

				.screen-text {
					font-size: 14px;
					margin-right: 10px;
				}
			}

			.device {
				padding: 0 10px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 10px;
				font-size: 14px;

				.device-left {
					display: flex;

					.device-total {
						margin-top: 10px;
						padding-left: 25px;
					}
				}

				.device-text {
					color: #0071bb;
				}
			}

			.goods-list {
				.goods-item {
					padding: 10px 20px;
					background-color: #00ffff;
					margin-bottom: 5px;
					position: relative;

					.address {
						font-size: 14px;
						font-weight: bold;
					}

					.goods-info {
						display: flex;
						margin-top: 10px;
						font-size: 12px;
						font-weight: bold;

						.personnel {
							margin-right: 10px;
						}

						.time {
							color: #de1f1f;
						}
					}

					.cont {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 5px;

						.cont-left {
							.bank {
								font-size: 12px;
								color: #999;
							}
						}

						.cont-right {
							text-align: right;

							.right-type {
								display: inline-block;
								color: #fff;
								font-size: 14px;
								padding: 2px 10px;
								background-color: #0071bb;
								border-radius: 20px;
							}

							.right-num {
								font-size: 12px;
								margin-top: 5px;
								font-weight: bold;

								span {
									margin-left: 10px;
								}
							}
						}
					}
					.selected {
						width: 60px;
						height: 60px;
						position: absolute;
						top: 0;
						right: 0;
					}
				}
			}
		}

		.right {
			width: 71%;
			padding: 10px;
			background-color: #fff;
			.right-title {
				font-size: 12px;
				font-weight: bold;
				padding-bottom: 10px;
			}

			.right-list {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: bold;

				.tips-box {
					display: flex;
					align-items: center;

					.tips {
						margin-left: 15px;
						font-size: 11px;
						color: #3f3fff;
					}
				}

				.count {
					font-size: 11px;

					span {
						margin-left: 10px;
					}
				}
			}
			.tables {
				margin-top: 10px;
				.commodity {
					display: flex;
					align-items: center;
					
					img {
						width: 30px;
						height: 45px;
					}
					.commodity-right {
						font-size: 10px;
						margin-left: 10px;
					}
				}
			}
		}
		.page_number{
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 5px 0;
		}
	}
</style>